<template>
  {{ formater }}
</template>

<script setup>
import { ref, onMounted, defineProps, defineEmits, watch } from 'vue'
const props = defineProps({
  second: {
    type: Number,
    default: 0
  },
  format: {
    type: String,
    default: 'MM-dd hh:mm'
  },
  sformat: {
    type: String,
    default: 'hh:mm:ss'
  },
  suffix: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['counterOver'])
// 倒计时显示
const formater = ref('')

onMounted(() => {
  formater.value = TIME_FORMAT(props.second)
})
// 倒计时逻辑处理
const TIME_FORMAT = (ts) => {
  let res

  const showtime = () => {
    if (ts <= 0) {
      clearInterval(run)
      emit('counterOver')
      return TIME_SFORMAT(0, props.sformat, props.suffix)
    }
    res = TIME_SFORMAT(ts, props.sformat, props.suffix)
    return res
  }
  const run = setInterval(() => {
    ts -= 1000
    res = showtime()
    formater.value = res
  }, 1000)
  return showtime()
}
const TIME_FORMIN = (param) => {
  if (param < 0) {
    param = 0
  }
  if (param < 10) {
    param = '0' + param
  }
  return param
}

const TIME_SFORMAT = (ts, sfmt, suffix) => {
  const time = {
    'h+': TIME_FORMIN(Math.floor((ts / 1000 / 60 / 60) % 24)),
    'm+': TIME_FORMIN(Math.floor((ts / 1000 / 60) % 60)),
    's+': TIME_FORMIN(Math.floor((ts / 1000) % 60))
  }
  for (const k in time) {
    if (new RegExp('(' + k + ')').test(sfmt)) {
      sfmt = sfmt.replace(
        RegExp.$1,
        RegExp.$1.length == 1
          ? time[k]
          : ('00' + time[k]).substr(('' + time[k]).length)
      )
    }
  }
  return sfmt + suffix
}
</script>

  <style></style>
